<template>
  <div class="home">
    <TopBar />
    <div class="nav">
      <!-- {{$route.path}} -->
      <ul>
        <li
          :class="$route.path === item.path ? 'current' : ''"
          v-for="item in tabList"
          :key="item.path"
        >
          <a
            href="javascript:void(0);"
            @click="clickFn(item.path)"
          >{{
            item.text
          }}</a>
        </li>
      </ul>
    </div>
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <router-link to="/about">About</router-link> -->
    <router-view />
    <Cat />
    <!-- <ChristmasTree /> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import TopBar from '@/components/TopBar.vue'
import Cat from '@/components/Cat.vue'
import bus from '@/main'

// import ChristmasTree from "@/components/christmasTree.vue";

export default {
  name: 'Home',
  components: {
    // HelloWorld
    TopBar,
    Cat
    // ChristmasTree,
  },
  data() {
    return {
      tabList: [
        {
          path: '/',
          text: '网站首页'
        },
        {
          path: '/xianyansuiyu',
          text: '闲言碎语'
        },
        {
          path: '/bokeriji',
          text: '博客日记'
        },
        {
          path: '/wodexiangce',
          text: '我的相册'
        },
        {
          path: '/guanyuwo',
          text: '关于我'
        },
        {
          path: '/yulubu',
          text: '语录簿'
        },
        {
          path: '/qianduan',
          text: '前端分享'
        },
        {
          path: '/shijianzhou',
          text: '时间轴'
        },
        {
          path: '/gerenjianli',
          text: '个人简历'
        },
        {
          path: '/chengjieyewu',
          text: '承接业务'
        },
        {
          path: '/liuyan',
          text: '留言板'
        }
      ]
    }
  },
  methods: {
    clickFn(path) {
      // if (path === this.$route.path) {
      //   return;
      // }
      this.$router.push({
        path: path
      })
      if (this.$route.path !== '/') {
        // this.$emit("getData");
        bus.$emit('getData')
      }
      // this.$router.go(0)
      // location.reload()
      // if (path === this.$route.path) {
      //   this.$router.go(0);
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
// 宽度大于1201px时
@media screen and (min-width: 1201px) {
  .nav {
    width: 1200px;
    margin: 0 auto;
  }
}

// 宽度小于1200px时
@media screen and (max-width: 1200px) {
  .nav {
    margin: 0 40px;
  }
}
@media only screen and (max-width: 1200px) {
  .home .nav {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    // 隐藏滚动条
    // &::-webkit-scrollbar {
    //   display: none;
    // }
  }
  .home .nav ul {
    width: max-content;
  }
}

@media only screen and (max-width: 480px) {
  .nav {
    margin: 0 15px;
  }
  body .home .nav ul {
    height: 40px;
    line-height: 40px;
  }
  body .home nav ul li a {
    padding: 0 15px;
    font-size: 55px;
  }
}

.home {
  .nav {
    margin-bottom: 20px;
    ul {
      display: block;
      clear: both;
      height: 50px;
      line-height: 50px;
      background: #fff;
      // box-shadow: #dddddd 3px 5px 5px;
      text-align: center;
      border-radius: 8px;
      box-shadow: 8px 8px 16px #cccbcb, -8px -8px 16px #ffffff;
      overflow: hidden;
      li {
        list-style: none;
        display: inline-block;
        font-size: 15px;
        position: relative;
        margin: 0 3px 0 0;
        cursor: pointer;
        a {
          color: #222;
          text-decoration: none;
          display: block;
          padding: 0 20px;
        }

        a:before {
          content: '';
          width: 0;
          height: 5px;
          top: 0;
          left: 0;
          position: absolute;
          transition: 0.5s;
        }
      }
      li a:hover:before,
      li.current a:before {
        width: 100%;
        background: #af0f09;
      }
      li > a:hover,
      .current > a {
        background: #e01109;
        color: #fff;
      }
    }
  }
}
</style>
